{%- if page.type == 'categories' -%}
  {%- assign taxonomies = site.categories -%}
{%- elsif page.type == 'tags' -%}
  {%- assign taxonomies = site.tags -%}
{%- else -%}
  {%- assign taxonomies = none -%}
{%- endif -%}

{%- assign max_count = 0 -%}
{%- for taxonomy in taxonomies -%}
  {%- assign posts = taxonomy[1] -%}
  {%- if posts.size > max_count -%}
    {%- assign max_count = posts.size -%}
  {%- endif -%}
{%- endfor -%}

<div class="category-tags d-flex flex-wrap justify-content-center">
  <!-- TODO: clean this up, it's brutal -->
  {%- for i in (1..max_count) reversed -%}
    {%- for taxonomy in taxonomies -%}
      {%- assign taxonomy_name = taxonomy[0] -%}
      {%- assign slugified_taxonomy_name = taxonomy_name | slugify -%}
      {%- assign posts = taxonomy[1] -%}
      {%- assign link = page.permalink -%}
      {%- if posts.size == i -%}
        {% capture anchor_url %}{{ link }}#{{ slugified_taxonomy_name }}{% endcapture %}
        {% if page.type == 'categories' %}
          {% assign taxonomy_name_list = taxonomy_name | split: ' ' %}
          {% capture capitalized_taxonomy_name %}
            {% for word in taxonomy_name_list %}
              {{ word | capitalize }}
            {% endfor %}
          {% endcapture %}
        {% endif %}
        <a class="card-link my-2 px-3 py-2" href="{{ anchor_url | relative_url }}">
          <span>
            {% if page.type == 'tags' %}
              {{ slugified_taxonomy_name }}
            {% else %}
              {{ capitalized_taxonomy_name }}
            {% endif %}
          </span>&nbsp;&nbsp;
          <span class="taxonomy-count">{{ posts.size }}</span>
        </a>
      {%- endif -%}
    {%- endfor -%}
  {%- endfor -%}
</div>

<div class="card-section mt-4">
{%- for i in (1..max_count) reversed -%}
  {%- for taxonomy in taxonomies -%}
      {%- assign taxonomy_name = taxonomy[0] -%}
      {%- assign slugified_taxonomy_name = taxonomy_name | slugify -%}
      {%- assign posts = taxonomy[1] -%}
      {%- if posts.size == i -%}
        <div class="card my-2 mx-3">
          <div class="card-body p-5">
            <a class="jump-to-anchor" id="{{ slugified_taxonomy_name }}"></a>
            {% if page.type == 'categories' %}
              {% assign taxonomy_name_list = taxonomy_name | split: ' ' %}
              {% capture capitalized_taxonomy_name %}
                {% for word in taxonomy_name_list %}
                  {{ word | capitalize }}
                {% endfor %}
              {% endcapture %}
            {% endif %}
            <h2 class="card-title" id="{{ slugified_taxonomy_name }}">
              {%- if page.type == 'tags' -%}
                {{ slugified_taxonomy_name }}
              {%- else -%}
                {{ capitalized_taxonomy_name }}
              {%- endif -%}
            </h2>
            
            {%- for post in posts -%}
              <p class="card-text card-list">
                <time datetime="{{ page.date | date_to_xmlschema }}">{{ post.date | date: "%b %-d, %Y" }}</time> 
                &raquo; 
                <a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
              </p>
            {%- endfor -%}

            <a href="#" onclick="backToTop()" class="back-to-top">
              <i class="fas fa-lg fa-chevron-up"></i>
            </a>
          </div>
        </div>
      {%- endif -%}
  {%- endfor -%}
{%- endfor -%}
</div>

<!-- IF NO TAGORIES -->
{% if taxonomies.size == 0 %}
<div class="d-flex justify-content-center">
  <p>No categories to display yet.</p>
</div>
{% endif %}

{% include back-to-top.html %}
